<template>
  <div class="add-question w100 h100 cc-display">
    <div id="form">
      <header class="pr w100 h60p cc-display bc2 border-none">
        <span>新增问题</span>
        <button
          class="close-box float-right w40p h40p br20p bc1 cc-display"
          @click.prevent="fnCloseBox"
        >
          X
        </button>
      </header>

      <div class="w100 pd020p border-none mgt20p">
        <div class="w100 sc-display"><span>所属题库：</span></div>
        <div class="w100 sc-display boder1s000">
          {{ state.questionInfo.lib }}
        </div>
      </div>

      <div class="w100 pd020p border-none mgt20p">
        <div class="w100 sc-display"><span>问题类型：</span></div>
        <div class="w100 sc-display boder1s000">
          {{ state.questionInfo.questionType }}
        </div>
      </div>

      <div class="w100 pd020p border-none mgt20p">
        <div class="w100 sc-display">
          <span class="w140p sc-display">问题标题：</span>
        </div>
        <div class="w100 sc-display boder1s000">
          {{ state.questionInfo.title }}
        </div>
      </div>

      <div class="w100 pd020p border-none mgt20p">
        <div class="w100 sc-display">
          <span class="w160p sc-display">问题描述：</span>
        </div>
        <div class="w100 sc-display boder1s000">
          {{ state.questionInfo.describe }}
        </div>
      </div>

      <div
        v-if="state.questionInfo.questionType !== 'Textarea'"
        class="w100 pd020p border-none mgt20p"
      >
        <span class="float-left pd100p">选择问题的条目：</span>
        <div
          class="w100 sc-display pd100 border-none mgt10p"
          v-for="(item, index) in state.questionInfo.questionItem"
          :key="index"
        >
          <span class="index cc-display bc2">{{ index + 1 }}</span>
          <input
            class="input mgl10p"
            type="text"
            readonly="readonly"
            v-model="state.questionInfo.questionItem[index]"
          />
        </div>
      </div>

      <div class="w100 pd020p border-none mgt20p">
        <div class="w100 sc-display">
          <span class="w160p sc-display">参考答案：</span>
        </div>
        <div class="w100 sc-display boder1s000">
          {{ state.questionInfo.answer }}
        </div>
      </div>

      <div class="w100 h80p cc-display submit">
        <button
          v-if="state.questionInfo.bType === 'check'"
          class="submint w100p h40p bc1 br20p"
          @click="fnQuestionOption('check', 'yes')"
        >
          通过
        </button>
        <button
          v-if="state.questionInfo.bType === 'check'"
          class="submint w100p h40p bc1 br20p"
          @click="fnQuestionOption('check', 'no')"
        >
          拒绝
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import SelectorText from "../../Text/SelectorText/SelectorText.vue";
import { post_ } from "/@/http/api.js";

export default {
  // 组件
  components: { SelectorText },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 回调父组件
  emits: ["close-box"],
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      typeList: [
        { text: "单选", value: "SingleChoice" },
        { text: "多选", value: "MultipleChoice" },
        { text: "简答", value: "Textarea" },
      ],
      questionInfo: {
        lib: props.msg?.lib || 0,
        questionType: props.msg?.questionType || "SingleChoice",
        title: props.msg?.title || "",
        describe: props.msg?.describe || "",
        questionItem: props.msg?.questionItem || [""],
        answer: props.msg?.answer || "",
        bType: "view",
      },
    });
    // 关闭
    const fnCloseBox = () => {
      console.log("no");
      emit("close-box", false);
    };
    // 添加问题
    const fnQuestionOption = (val) => {
      console.log(val);
      // let data = Object.assign({}, state.questionInfo);
      // data.questionItem = JSON.stringify(data.questionItem);
      // post_("api/addQuestion", { ...data });
    };
    // 监听传入值
    watch(
      () => props.msg,
      (newVal) => {
        newVal.questionItem = JSON.parse(newVal.questionItem);
        state.questionInfo = newVal;
      }
    );
    // 传入模板
    return {
      state,
      fnCloseBox,
      fnQuestionOption,
    };
  },
};
</script>

<style scoped>
.add-question {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
}

#form {
  width: 80%;
  background-color: #fff;
  min-height: 520px;
  max-height: 80%;
  overflow: auto;
  overflow: overlay;
}

.close-box {
  position: absolute;
  right: 10px;
  top: 10px;
}

.index {
  width: 50px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
}

.button {
  cursor: pointer;
  border: none;
  width: 40px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
}

.input {
  height: 30px;
  width: 100%;
}
.submint {
  cursor: pointer;
  border: none;
}
</style>
